<template>
  <div class="full-screen-div">
    <HeaderComponent @go-back="goBack" title="审批" />
    <ApplicationFilter v-if="leaderPower == 1" @filterCondition="getfilterCondition"
      style="width: 90%;margin: 5px auto 5px auto;position: relative;" />
    <RecordList v-if="leaderPower == 1 && applicationRecordsList!=null" useType="approval" :records="applicationRecordsList"
      style="width: 90%;height: 70%;margin: 5px auto 5px auto;position: relative;overflow-y: scroll;" />
    <div class="board" v-else>
      无权限查看！
    </div>
  </div>
</template>

<script setup>
import HeaderComponent from '../../component/Header.vue';
import ApplicationFilter from '../../component/ApplicationFilter.vue';
import RecordList from '../../component/RecordList.vue';
import { onMounted, ref, watch } from 'vue';
import { getSessionStorageObj, getCurDateTime } from '../../utils/common.js'
import { getLeaderApprovalList } from '../../api/approval.js'
import router from '../../router/index.js'
const goBack = () => {
  router.push('/betch'); // 返回申请记录列表页
};

const requestBody = ref({
  "deptId": "",
  "endTime": "",
  "startTime": ""
})

const userInfo = ref()
const leaderPower = ref();
const applicationRecordsList = ref([]);

const getfilterCondition = (data) => {
  requestBody.value.startTime = data.startTime;
  requestBody.value.endTime = data.endTime;
  requestBody.value.flowId = data.type;

  console.log("requestBody.value:", requestBody.value);
}

const initApplicationRecordsList = async (data) => {
  const res = await getLeaderApprovalList(data);
  console.log("res:", res);
  if (res.flag) {
    applicationRecordsList.value = res.result.reverse();
  } else {
    applicationRecordsList.value = [];
  }
}

watch(requestBody.value, async (newValue) => {
  //发生变化就发一次请求
  initApplicationRecordsList(newValue);
})

onMounted(() => {
  userInfo.value = getSessionStorageObj('userInfo')
  leaderPower.value = userInfo.value.isLeader
  console.log("userInfo:", userInfo.value);
  console.log("leaderPower:", leaderPower.value);

  //设置起始时间
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(now.getDate() + 1);

  requestBody.value.startTime = getCurDateTime(now);
  requestBody.value.endTime = getCurDateTime(tomorrow);
  requestBody.value.deptId = userInfo.value.deptId
  requestBody.value.isLeader = userInfo.value.isLeader

  console.log("requestBody:", requestBody.value);
  initApplicationRecordsList(requestBody.value);
})
</script>

<style scoped>
.full-screen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E1EFFF;
  display: flex;
  flex-direction: column;
}
.board{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 20px;
  color: grey;
}
</style>